<template>
  <div class="coupon-container">
    <div class="coupon-grid">
      <div class="coupon-card" :class="[getClass(el), { 'expired': el.status == 'EXPIRED' && el.expiredAt <= now }]"
        v-for="(el, index) in data" :key="index">
        <div class="coupon-info">
          <!-- <div class="coupon-header">
            <div class="coupon-type">
              <span class="type-icon" :class="getClass(el)"></span>
              <span class="type-name">{{ compName(el) }}</span>
            </div>
            <button v-if="el.status != 'EXPIRED' && el.expiredAt >= now" class="use-btn" :class="textSty(el)"
              @click="goUse()">
              {{ $t('pay.apply') }}
            </button>
          </div> -->

          <div class="coupon-value">
            <span class="currency" v-if="el.type != 'ZKQ'">{{ userInfo.currencySymbol }}</span>
            <span class="amount">{{ el.type == 'ZKQ' ? `${bigTimes((el.discountShowOFF || 0), 10)}%` :
              el.discountShowOFF
              || 0 }}</span>
            <span class="unit">OFF</span>
          </div>

          <div class="coupon-condition">
            {{ `${$t('personal.MinFreight')} ${userInfo.currencySymbol}${el.minPrice || 0}
            ${userLanguage.code == 'zh_CN' ? $t('personal.required') : ''}` }}
          </div>

          <div class="coupon-period">{{ `${el.startTime || ''} ~ ${el.endTime || ''}` }}</div>
        </div>

        <div class="coupon-footer" @click="goUse(el)">
          <div v-if="(el.status != 'UNUSED' || el.isAvailable == false) && el.status != 'EXPIRED'"
            class="coupon-reason">
            {{ el.noAvailableReason || '——' }}
          </div>
          <div v-else class="coupon-desc">{{ el.description || '——' }}</div>

          <span class="dot-left"></span>
          <span class="dot-right"></span>
        </div>
      </div>
    </div>

    <div class="no-data" v-if="!data.length">
      <t-no-data></t-no-data>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { bigTimes } from "@/common/digital-computation";
import TNoData from "@/components/t-no-data";

export default {
  props: {
    data: {
      type: [Array, String],
      default: ''
    }
  },
  components: { TNoData },
  data() {
    return {
      now: Date.now()
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      userInfo: state => state.user.userInfo,
      userLanguage: state => state.user.userLanguage,
    })
  },
  methods: {
    bigTimes,
    getClass(item) {
      return item.targetObject?.toLowerCase() || '';
    },
    textSty(item) {
      return `${item.targetObject?.toLowerCase()}-btn` || '';
    },
    compName(item) {
      if (item.targetObject === 'EXPRESS') {
        return this.$t('user.express_coupon_tit');
      } else if (item.targetObject === 'ORDER') {
        return this.$t('user.order_coupon_tit');
      }
      return '';
    },
    goUse(e) {
      if (e.status !== 'EXPIRED') {
        this.$router.push('/');
      }
    }
  }
}
</script>

<style lang="less" scoped>
.coupon-container {
  padding: 16px 0;

  .coupon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }

  .coupon-card {
    position: relative;
    border-radius: 16px;
    background: rgba(255, 230, 238);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    &.expired {
      .coupon-info {
        border-color: rgba(234, 234, 234);
        background: rgba(245, 245, 245);
        color: #A0A0A0 !important;
      }

      .coupon-footer {
        background: #A0A0A0;

        .dot-left,
        .dot-right {
          border-color: rgba(234, 234, 234);
        }
      }
    }

    .coupon-info {
      padding: 23px 23px 13px;
      text-align: center;
      color: #FF186B;
      border: 1px solid rgba(255, 189, 211);
      border-bottom: 0;
    }

    .coupon-footer {
      background: #FF186B;
      position: relative;

      .dot-left,
      .dot-right {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid rgba(255, 189, 211);
        top: -12px;
      }

      .dot-left {
        left: -12px;
      }

      .dot-right {
        right: -12px;
      }
    }

    // &.express {
    //   background: linear-gradient(135deg, #FF9A44 0%, #FF6A25 100%);
    // }

    // &.order {
    //   background: linear-gradient(135deg, #FF477E 0%, #FF1140 100%);
    // }

    // &.expired {
    //   opacity: 0.7;
    //   filter: grayscale(80%);
    // }
  }

  .coupon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .coupon-type {
    display: flex;
    align-items: center;
    font-weight: 500;

    .type-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      background-color: white;
      border-radius: 50%;

      &.express {
        background-color: #FF6A25;
      }

      &.order {
        background-color: #FF1140;
      }
    }
  }

  .use-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 20px;
    background: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      opacity: 0.9;
    }

    &.express-btn {
      color: #FF6A25;
    }

    &.order-btn {
      color: #FF1140;
    }
  }

  .coupon-value {
    margin-bottom: 8px;

    .currency {
      font-size: 24px;
      font-weight: bold;
      margin-right: 4px;
    }

    .amount {
      font-size: 32px;
      font-weight: bold;
      line-height: 1;
    }

    .unit {
      font-size: 18px;
      margin-left: 8px;
      margin-bottom: 4px;
    }
  }

  .coupon-condition {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .coupon-period {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .coupon-reason,
  .coupon-desc {
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    color: #FFF;
    text-align: center;
    height: 47px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .expired-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
  }

  .no-data {
    margin: 40px auto;
    text-align: center;
  }
}
</style>